<template>
  <div>
    <el-menu
      :collapse="isCollapse"
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="(i) in menu.children">
        <el-submenu v-if="i.children" :index="i.path" :key="i.name">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{i.name}}</span>
          </template>
          <el-menu-item-group>
            <template v-for="n in i.children">
              <el-menu-item  :index="n.path" :key="n.name">{{n.name}}</el-menu-item>
            </template>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-if="!i.children" :key="i.name" :index="i.path">
          <i class="el-icon-setting"></i>
          <span slot="title">{{i.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
  }
</style>

<script>
  export default {
    name: 'baseSidebar',
    data() {
      return {
        isCollapse: false,
        menu: []
      }
    },
    props: {
      propsIsCollapse: {
        type: Boolean
      },
    },
    created() {
      this.menu = JSON.parse(this.$store.state.user.menu.menuData)[1]
    },
    mounted() {
      this.isCollapse = this.propsIsCollapse
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$router.replace({
          path: key
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    watch: {
      propsIsCollapse() {
        this.isCollapse = this.propsIsCollapse
      }
    }
  }
</script>
